import React, { forwardRef } from 'react';
import { Select } from 'packages/ui-shared/src/atoms';

// 创建 SelectContent 组件作为 Select 的包装器
const SelectContent = forwardRef<HTMLDivElement, {
  children: React.ReactNode;
  className?: string;
  // 可以根据需要添加其他属性
}>(({ children, className, ...props }, ref) => {
  return (
    <div 
      ref={ref} 
      className={`select-content ${className || ''}`}
      {...props}
    >
      {children}
    </div>
  );
});

// 创建相关的子组件
const SelectItem = forwardRef<HTMLOptionElement, {
  children: React.ReactNode;
  value: string | number;
  className?: string;
}>(({ children, value, className, ...props }, ref) => {
  return (
    <option 
      ref={ref} 
      value={value} 
      className={`select-item ${className || ''}`}
      {...props}
    >
      {children}
    </option>
  );
});

const SelectTrigger = forwardRef<HTMLSelectElement, {
  children: React.ReactNode;
  className?: string;
  value?: string | number;
  onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
}>(({ children, className, value, onChange, ...props }, ref) => {
  return (
    <select 
      ref={ref} 
      className={`select-trigger ${className || ''}`}
      value={value} 
      onChange={onChange}
      {...props}
    >
      {children}
    </select>
  );
});

const SelectValue = forwardRef<HTMLSpanElement, {
  children: React.ReactNode;
  className?: string;
}>(({ children, className, ...props }, ref) => {
  return (
    <span 
      ref={ref} 
      className={`select-value ${className || ''}`}
      {...props}
    >
      {children}
    </span>
  );
});

// 导出所有组件
SelectContent.Item = SelectItem;
SelectContent.Trigger = SelectTrigger;
SelectContent.Value = SelectValue;

export { SelectContent, SelectItem, SelectTrigger, SelectValue };